<template>
	<view class="content">
		<!-- Banner Image -->
		<view class="image-container">
			<u-image :src="img" mode="aspectFill" class="course-banner"></u-image>
		</view>

		<!-- Course Details -->
		<view class="details">
			<view class="course-header">
				<text class="course-title">{{courseInfo.courseName}}</text>
				<view class="price-tag">
					<text class="price-label">¥</text>
					<text class="price-value">{{courseInfo.price}}</text>
				</view>
			</view>

			<!-- Course Details Section -->
			<view class="course-details">
				<view class="details-content">
					<view class="details-item">
						<text class="item-label">课程简介</text>
						<text class="item-value">{{courseInfo.courseDescription || '暂无课程简介'}}</text>
					</view>

				</view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<u-icon name="bookmark" size="20" color="#666"></u-icon>
					<text class="info-label">{{course.title2}}</text>
					<text class="info-value">{{courseInfo.courseType}}</text>
				</view>

				<view class="info-item">
					<u-icon name="clock" size="20" color="#666"></u-icon>
					<text class="info-label">{{course.title3}}</text>
					<text class="info-value">{{courseInfo.hours}}</text>
				</view>

				<view class="info-item">
					<u-icon name="calendar" size="20" color="#666"></u-icon>
					<text class="info-label">{{course.title4}}</text>
					<text class="info-value">{{courseInfo.startTime}}</text>
				</view>

				<view class="info-item">
					<u-icon name="calendar" size="20" color="#666"></u-icon>
					<text class="info-label">{{course.title5}}</text>
					<text class="info-value">{{courseInfo.endTime}}</text>
				</view>
			</view>



			<view class="action-buttons">
				<u-button type="primary" text="立即报名" size="large" shape="circle" @click="showOrder "></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCourse } from '@/api/course.js'
import { data } from 'uview-ui/libs/mixin/mixin'

	export default {
		data() {
			return {
				img:'',
				course: {
					title1: '课程名称',
					title2: '课程类型',
					title3: '课程学时',
					title4: '课程开始时间',
					title5: '课程结束时间',
					title6: '课程价格',
				},
				courseInfo: {
					courseName: '高中数学辅导课程',
					courseType: '线下课',
					hours: '总学时',
					startTime: '12222',
					endTime: '2323',
					price: '2222',
					description: '',
					targetAudience: '',
					objectives: '',
					outline: ''
				}
			}
		},
		// onLoad() {
		// 	this.windowInfo = uni.getWindowInfo()
		// 	this.getCourseInfo()
		// },
		onLoad: function (option) {
			this.courseId = option.courseId
			console.log(this.courseId ,"aaaaa")
			this.windowInfo = uni.getWindowInfo()
			this.getCourseInfo()
		},
		methods: {
			getCourseInfo() {
				const courseId = 1
				const data ={
					// courseId: courseId,
					courseId: this.courseId,
				}
				getCourse(data).then(res =>{
					console.log(res,8888)
					this.courseInfo = res.data.course
					this.img =  this.courseInfo.url
				})
			},

			showOrder(){
				uni.navigateTo({
					url: '/pages/orderConfirm/orderConfirm'
				});
			}
		},


	}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f8f8f8;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 120rpx;
}

.image-container {
	width: 100%;
	height: 50vh;
	max-height: 500rpx;
	min-height: 300rpx;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;

	.course-banner {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.details {
	padding: 30rpx;
	margin-top: 0;
	background-color: #fff;
	border-radius: 40rpx 40rpx 0 0;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
	width: 100%;
	box-sizing: border-box;
}

.course-header {
	margin-bottom: 40rpx;
	width: 100%;

	.course-title {
		font-size: clamp(32rpx, 4vw, 36rpx);
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		word-break: break-word;
	}

	.price-tag {
		display: inline-flex;
		align-items: baseline;
		background-color: #f0f9ff;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;

		.price-label {
			font-size: clamp(20rpx, 3vw, 24rpx);
			color: #2979ff;
			margin-right: 4rpx;
		}

		.price-value {
			font-size: clamp(28rpx, 3.5vw, 32rpx);
			font-weight: bold;
			color: #2979ff;
		}
	}
}

.course-details {
	background-color: #f8f8f8;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 40rpx;

	.details-header {
		margin-bottom: 20rpx;

		.details-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.details-content {
		.details-item {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.item-label {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 8rpx;
				display: block;
			}

			.item-value {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				display: block;
			}
		}
	}
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	margin-bottom: 40rpx;
	width: 100%;
}

.info-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 16rpx;
	width: 100%;
	box-sizing: border-box;

	.info-label {
		font-size: clamp(20rpx, 3vw, 24rpx);
		color: #666;
		margin: 8rpx 0;
	}

	.info-value {
		font-size: clamp(24rpx, 3.5vw, 28rpx);
		color: #333;
		font-weight: 500;
		word-break: break-word;
	}
}

.teacher-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 16rpx;
	margin-bottom: 40rpx;
	width: 100%;
	box-sizing: border-box;

	.teacher-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex: 1;
		min-width: 0;

		.info-label {
			font-size: clamp(20rpx, 3vw, 24rpx);
			color: #666;
			white-space: nowrap;
		}

		.info-value {
			font-size: clamp(24rpx, 3.5vw, 28rpx);
			color: #333;
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.more-details {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: #666;
		font-size: clamp(20rpx, 3vw, 24rpx);
		white-space: nowrap;
		margin-left: 20rpx;
	}
}

.action-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
	box-sizing: border-box;

	:deep(.u-button) {
		height: 88rpx;
		font-size: 32rpx;
		width: 100%;
	}
}

/* 修改媒体查询，保持两列布局 */
@media screen and (max-width: 375px) {
	.content {
		padding-bottom: 100rpx;
	}

	.details {
		padding: 20rpx;
	}

	.info-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
	}

	.teacher-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 10rpx;

		.more-details {
			margin-left: 0;
			align-self: flex-end;
		}
	}

	.action-buttons {
		padding: 16rpx 20rpx;
	}
}

/* 确保在小屏幕上内容不会溢出 */
@media screen and (max-width: 320px) {
	.content {
		padding-bottom: 90rpx;
	}

	.course-header {
		.course-title {
			font-size: 28rpx;
		}
	}

	.info-item {
		padding: 15rpx;
	}

	.action-buttons {
		padding: 12rpx 16rpx;
	}
}
</style>